<template>
	<video 
	class="fullvideo" 
	:poster="item.video.thumbnail_link[0]" 
	:show-center-play-btn="false"
	:show-fullscreen-btn="false"
	:show-progress="false"
	:id="'video_'+item.video.video[0]"
	:loop="true"
	:controls="false"
	:src="item.video.video[0]" objectFit="contain"
	@click="ctrlVideo">
	
		<cover-view class="coverViewRight">
			<cover-image :src="item.u.header[0]" class="userPhoto"></cover-image>
			<cover-view class="iconfont iconicon3"></cover-view>
			<cover-view class="heartCount" style="margin-bottom: 30rpx;">{{item.up}}</cover-view>
			<cover-view class="iconfont iconxiaoxi"></cover-view>
			<cover-view class="replayCount" style="margin-bottom: 30rpx;">{{item.comment}}</cover-view>
			<cover-view class="iconfont iconzhuanfa00"></cover-view>
			<cover-view class="forwardCount">{{item.forward}}</cover-view>
		</cover-view>
		<cover-view class="coverViewBottom">
			<cover-view class="nickName">@{{item.u.name}}</cover-view>
			<cover-view class="smartapp_title">{{item.smartapp_title}}</cover-view>
		</cover-view>
	</video>
</template>

<script>
	export default {
		name:"video-item",
		props:{
			item:{
				type:Object
			},
			isPlay:{
				type:Boolean,
				default:false
			}
		},
		
		data(){
			return {
				videoCtx:null,
				isPlaying:false
			}
		},
		mounted(){
			this.videoCtx=uni.createVideoContext("video_"+this.item.video.video[0],this);
			
		},
		watch:{
			isPlay(newValue){
				if(newValue==true){
					this.videoCtx.play();
				}
				else{
					this.videoCtx.pause();
				}
				this.isPlaying=newValue;
			}
		},
		methods:{
			ctrlVideo(){
				if(this.isPlaying){
					this.videoCtx.pause();
					this.isPlaying=false;
				}
				else{
					this.videoCtx.play();
					this.isPlaying=true;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.fullvideo{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	.coverViewRight{
		position: absolute;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		bottom: 100rpx;
		color: white;
		font-size: 24rpx;
		align-items: center;
		.iconfont{
			font-size: 72rpx;
		}
		.userPhoto{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-bottom: 30rpx;
			border: 1px solid white;
		}
	}
	.coverViewBottom{
		color: white;
		font-size: 28rpx;
		position: absolute;
		bottom: 40rpx;
		left: 20px;
		right: 160rpx;
		.nickName{
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.smartapp_title{
			white-space: normal;
			line-height: 1.7;
		}
	}
</style>
